<template>
  <div class="style-analysis">
    <el-card class="style-overview" v-loading="loading">
      <template #header>
        <span>风格分析概览</span>
      </template>
      
      <div class="overview-content">
        <div class="main-style">
          <h3>您的主要风格</h3>
          <div class="style-badge">
            <el-tag size="large" type="primary">{{ mainStyle?.style || '休闲风格' }}</el-tag>
          </div>
          <p>占比 {{ mainStyle?.percentage || '45' }}% · 平均评分 {{ mainStyle?.averageRating || '4.2' }}</p>
        </div>
        
        <div class="style-stats">
          <el-row :gutter="20">
            <el-col :span="8">
              <div class="stat-item">
                <div class="stat-value">{{ analysisData.totalOutfits || 0 }}</div>
                <div class="stat-label">总搭配数</div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="stat-item">
                <div class="stat-value">{{ analysisData.styleDistribution?.length || 0 }}</div>
                <div class="stat-label">风格类型</div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="stat-item">
                <div class="stat-value">{{ mainStyle?.averageRating || 0 }}</div>
                <div class="stat-label">平均评分</div>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
    </el-card>

    <el-card class="style-distribution" v-loading="loading">
      <template #header>
        <span>风格分布</span>
      </template>
      
      <div class="style-list">
        <div 
          v-for="style in analysisData.styleDistribution" 
          :key="style.style"
          class="style-item"
        >
          <div class="style-info">
            <h4>{{ style.style }}</h4>
            <p>{{ style.count }} 个搭配 · 穿着 {{ style.wearCount }} 次</p>
          </div>
          
          <div class="style-metrics">
            <div class="percentage">{{ style.percentage }}%</div>
            <el-rate 
              v-model="style.averageRating" 
              disabled 
              show-score 
              text-color="#ff9900"
              score-template="{value}"
            />
          </div>
          
          <div class="style-bar">
            <el-progress 
              :percentage="parseFloat(style.percentage)" 
              :show-text="false"
              :stroke-width="8"
            />
          </div>
        </div>
      </div>
    </el-card>

    <el-card class="style-recommendations">
      <template #header>
        <span>风格建议</span>
      </template>
      
      <div class="recommendations">
        <el-alert
          title="风格多样性建议"
          description="尝试更多不同的风格搭配，增加穿搭的多样性和趣味性"
          type="info"
          :closable="false"
          style="margin-bottom: 16px;"
        />
        
        <div class="suggestion-list">
          <div class="suggestion-item">
            <el-icon class="suggestion-icon"><Brush /></el-icon>
            <div class="suggestion-content">
              <h4>尝试正式风格</h4>
              <p>您的正式风格搭配较少，可以尝试添加一些商务或正式场合的搭配</p>
            </div>
          </div>
          
          <div class="suggestion-item">
            <el-icon class="suggestion-icon"><Star /></el-icon>
            <div class="suggestion-content">
              <h4>提升搭配评分</h4>
              <p>关注搭配的细节和配色，提升整体的搭配质量</p>
            </div>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { analysisAPI } from '@/api'

const loading = ref(false)
const analysisData = reactive({
  totalOutfits: 0,
  styleDistribution: [],
  mostPopularStyle: null,
  recommendations: []
})

const mainStyle = computed(() => {
  return analysisData.styleDistribution?.[0] || null
})

const loadData = async () => {
  try {
    loading.value = true
    const response = await analysisAPI.getOutfitStyle()
    
    if (response.code === 200) {
      Object.assign(analysisData, response.data)
    } else {
      throw new Error(response.message || '获取风格分析数据失败')
    }
  } catch (error) {
    console.error('获取风格分析失败:', error)
    ElMessage.error('获取数据失败')
    
    // 模拟数据
    Object.assign(analysisData, {
      totalOutfits: 25,
      styleDistribution: [
        { style: '休闲', count: 12, wearCount: 35, percentage: '48.0', averageRating: 4.2 },
        { style: '商务', count: 8, wearCount: 20, percentage: '32.0', averageRating: 4.5 },
        { style: '正式', count: 3, wearCount: 8, percentage: '12.0', averageRating: 4.0 },
        { style: '运动', count: 2, wearCount: 5, percentage: '8.0', averageRating: 3.8 }
      ]
    })
  } finally {
    loading.value = false
  }
}

onMounted(() => {
  loadData()
})
</script>

<style scoped>
.style-analysis {
  space-y: 20px;
}

.style-overview,
.style-distribution,
.style-recommendations {
  margin-bottom: 20px;
}

.overview-content {
  display: flex;
  gap: 40px;
  align-items: center;
}

.main-style {
  text-align: center;
  flex: 1;
}

.main-style h3 {
  margin: 0 0 16px 0;
  color: #333;
}

.style-badge {
  margin-bottom: 12px;
}

.main-style p {
  margin: 0;
  color: #666;
  font-size: 14px;
}

.style-stats {
  flex: 2;
}

.stat-item {
  text-align: center;
  padding: 16px;
  border-radius: 8px;
  background: #f8f9fa;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  color: #409EFF;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 14px;
  color: #666;
}

.style-list {
  space-y: 16px;
}

.style-item {
  display: flex;
  align-items: center;
  padding: 16px;
  border: 1px solid #eee;
  border-radius: 8px;
  margin-bottom: 12px;
}

.style-info {
  flex: 1;
  margin-right: 16px;
}

.style-info h4 {
  margin: 0 0 4px 0;
  font-size: 16px;
  color: #333;
}

.style-info p {
  margin: 0;
  font-size: 14px;
  color: #666;
}

.style-metrics {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-right: 16px;
  min-width: 100px;
}

.percentage {
  font-size: 18px;
  font-weight: bold;
  color: #409EFF;
  margin-bottom: 8px;
}

.style-bar {
  width: 120px;
}

.recommendations {
  space-y: 16px;
}

.suggestion-list {
  space-y: 12px;
}

.suggestion-item {
  display: flex;
  align-items: center;
  padding: 16px;
  border: 1px solid #eee;
  border-radius: 8px;
  margin-bottom: 12px;
}

.suggestion-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #67C23A;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16px;
  font-size: 18px;
}

.suggestion-content h4 {
  margin: 0 0 4px 0;
  font-size: 16px;
  color: #333;
}

.suggestion-content p {
  margin: 0;
  font-size: 14px;
  color: #666;
  line-height: 1.5;
}

@media (max-width: 768px) {
  .overview-content {
    flex-direction: column;
    gap: 20px;
  }
  
  .style-item {
    flex-direction: column;
    text-align: center;
    gap: 12px;
  }
  
  .style-info {
    margin-right: 0;
  }
  
  .style-metrics {
    margin-right: 0;
  }
  
  .style-bar {
    width: 100%;
  }
  
  .suggestion-item {
    flex-direction: column;
    text-align: center;
    gap: 12px;
  }
  
  .suggestion-icon {
    margin-right: 0;
  }
}
</style>
